/* eslint-disable template-curly-spacing */
import * as React from "react";
import { Uploader, UploadField } from "@navjobs/upload";
import "./index.scss";

class Upload extends React.Component {
  static defaultProps = {
    onChange: () => {},
  };

  static getDerivedStateFromProps(nextProps) {
    const { value } = nextProps;
    if (value) {
      return {
        fileList: value,
      };
    }
    return null;
  }

  state = {
    fileList: this.props.value || [],
  };

  handleDel = index => {
    const { fileList } = this.state;
    const { onChange } = this.props;
    fileList.splice(index, 1);
    this.setState({
      fileList,
    });
    onChange(fileList);
  };

  render() {
    const { node } = this.props;
    const labelText = node.data.label;
    const { onChange } = this.props;
    const { fileList } = this.state;
    return (
      <Uploader
        request={{
          url: "http://localhost:3000/",
          method: "POST",
          fields: {
            // extra fields to pass with the request
            full_name: "Testing extra fields",
          },
          headers: {
            // custom headers to send along
            Authorization: "Bearer: Test",
          },
          // use credentials for cross-site requests
          withCredentials: false,
        }}
        onComplete={({ response, status }) => {
          if (status === 200) {
            onChange([ ...fileList, response ]);
          } else {
            onChange([ ...fileList, { ...response, fail: true } ]);
          }
        }}
        // upload on file selection, otherwise use `startUpload`
        uploadOnSelection
      >
        {({ onFiles }) => (
          <div
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
            }} style={{ ...this.props.style }}
          >
            <UploadField onFiles={onFiles}>
              <div style={{ minHeight: "1.52rem" }} className="formitem">
                <label>{labelText || "附件"}</label>
                <div className="novalue">
                  <div style={{ display: "flex" }}>
                    <span>添加附件</span>
                    <img
                      alt=""
                      src={`${process.env.PUBLIC_URL}/assets/img/add.png`}
                      className="add"
                    />
                  </div>
                </div>
              </div>
            </UploadField>
            {fileList.map((file, index) => (
              // eslint-disable-next-line react/no-array-index-key
              <div className="filelist" key={index}>
                <div>
                  <img
                    alt=""
                    src={`${process.env.PUBLIC_URL}../assets/img/enclosure.png`}
                  />
                  <span>{file.filename}</span>
                </div>
                <img
                  onClick={() => this.handleDel(index)}
                  src={`${process.env.PUBLIC_URL}../assets/img/enclosure.png`}
                  className="del"
                  alt=""
                />
              </div>
            ))}
            {/* {progress ? `Progress: ${progress}` : null}
          {complete ? "Complete!" : null} */}
          </div>
        )}
      </Uploader>
    );
  }
}
export default props => {
  return <Upload {...props} />;
};
